<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>工资列表</title>
  <link rel="stylesheet" href="./static/css/layui.css" media="all">
  <link rel="stylesheet" href="./static/css/common.css">
</head>
<body>
<div>
  <div>
    <form class="layui-form">
      <div class="layui-row">
        <div class="layui-form-item layui-col-md12 layui-col-xs12">
          <div class="layui-inline">
            <label class="layui-form-label">职工姓名</label>
            <div class="layui-input-inline">
              <input type="text" name="empName" placeholder="职工姓名" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">职工角色</label>
            <div class="layui-input-inline">
              <input type="tel" name="roleName" placeholder="职工角色" readonly autocomplete="off" class="layui-input"
                     id="chooseRole">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">职工部门</label>
            <div class="layui-input-inline">
              <input type="text" name="departmentName" placeholder="职工部门" readonly autocomplete="off"
                     class="layui-input"
                     id="chooseDepartment">
            </div>
          </div>
          <div class="layui-inline">
            <div class="layui-input-block">
              <button type="reset" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-refresh-3"></i>清空搜索
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-row">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">最小工资</label>
            <div class="layui-input-inline">
              <input type="tel" name="startMoney" placeholder="最小工资" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">最大工资</label>
            <div class="layui-input-inline">
              <input name="endMoney" placeholder="最大工资" department-id="" class="layui-input" id="demo2">
            </div>
          </div>
          <div class="layui-inline">
            <div class="layui-input-block">
              <button type="button" id="searchBtn" class="layui-btn" lay-submit="" lay-filter="search"><i
                      class="layui-icon layui-icon-search"></i>立即搜索
              </button>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
  <table class="layui-hide" id="test" lay-filter="test"></table>

  <script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
    </div>
  </script>

  <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  </script>

</div>

<script src="./static/layui.js"></script>
<script src="./static/common.js"></script>
<script src="./static/echarts.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>
  layui.use(['table', 'jquery', 'layer'], function () {
    var table = layui.table,
      $ = layui.$,
      layer = layui.layer,
      dropdown = layui.dropdown;

    $(() => {

      $.get("/StaffManagement/department/getAll", "", data => {
        if (data.code == 0) {
          let menu = [];
          for (let temp of data.data) {
            menu.push({
              title: temp.departmentName,
              id: temp.id
            })
          }
          console.log(menu);
          dropdown.render({
            elem: '#chooseDepartment'
            , data: menu
            , click: function (obj) {
              this.elem.val(obj.title);
            }
          });
        }
      })

      dropdown.render({
        elem: '#chooseRole'
        , data: [
          {
            id: 1,
            title: "普通员工"
          }, {
            id: 2,
            title: "管理员"
          }
        ]
        , click: function (obj) {
          this.elem.val(obj.title);
        }
      });

      $("#searchBtn").bind("click", () => {
        if ($("input[name='startMoney']").val() > $("input[name='endMoney']").val()) {
          swal("提示", "最小工资不能大于最大工资", "error");
          return;
        }

        table.reload('test', {
          url: "/StaffManagement/salary/getAll?empName=" + $("input[name='empName']").val() + "&roleName=" + $("input[name='roleName']").val() + "&departmentName=" + $("input[name='departmentName']").val() +
            "&startMoney=" + $("input[name='startMoney']").val() + "&endMoney=" + $("input[name='endMoney']").val(),
          methods: "get"
        })
      })

      $.get("/StaffManagement/department/getAll", "", data => {
        if (data.code == 200) {
          let menu = [];
          for (let temp of data.data) {
            menu.push({
              title: temp.departmentName,
              id: temp.id
            })
          }
        }
      })
    })

    table.render({
      elem: '#test'
      , url: '/StaffManagement/salary/getAll'
      , id: "test"
      , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
      , defaultToolbar: ['filter', 'exports', 'print']
      , title: '员工工资表'
      , cols: [[
        {type: 'checkbox', fixed: 'left'}
        , {field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true}
        , {field: 'empName', title: '职工姓名', width: 250}
        , {field: 'departmentName', title: '职工部门', width: 250}
        , {field: 'roleName', title: '职工角色', width: 250}
        , {field: 'money', title: '职工工资', width: 180}
        , {field: 'right', title: '操作', toolbar: '#barDemo', width: 150}
      ]]
      ,
      page: true
    });

    //监听行工具事件
    table.on('tool(test)', function (obj) {
      var data = obj.data;
      console.log(obj)
      let user = JSON.parse(window.localStorage.getItem("user"));
      console.log(user);
      if (user.role.roleName != "管理员") {
        swal("提示", "您没有该权限", "warning");
        return;
      }
      if (obj.event === 'edit') {
        layer.open({
          type: 2,
          title: "编辑工资",
          toolbar: '#toolbarDemo',
          shade: 0.2,
          maxmin: true,
          shadeClose: true,
          area: ['100%',
            '100%'],
          content: "salaryEdit.html",
          btn: ['取消'],
          anim: 4,
          success: (layero, index) => {
            let body = layer.getChildFrame('body', index);
            body.find("#empId").val(obj.data.empId);
            body.find("#empName").val(obj.data.empName);
            body.find("#departmentName").val(obj.data.departmentName);
            body.find("#roleName").val(obj.data.roleName);
            body.find("#money").val(obj.data.money);
            layui.form.render();
          }
        })
      }
    });
  })
  ;
</script>
</body>
</html>